import React, { useCallback, useEffect, useState } from 'react';
import { Input, Tabs, Checkbox, Divider, Row, Col, Radio } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { getComponentData } from 'src/services/AnalyseManage';
import { WD_TYPE, WILDCARD } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';

const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;

interface IProps {
	field: any;
	config: any;
	setDimensionStringList: Function;
	setDimensionStringWildcard: Function;
}

const FilterFieldString = ( props: IProps ) => {
	const { field = {}, config, setDimensionStringList, setDimensionStringWildcard } = props;
	const tableCode = config.data.tableCode;
	const [ keyword, setKeyword ] = useState( '' );
	const [ wildcard, setWildcard ] = useState( '' );
	const [ wildcardType, setWildcardType ] = useState( WILDCARD[ 0 ].value );

	const [ timer, setTimer ] = useState();
	const [ plainOptions, setPlainOptions ] = useState( [] );		//	全部可选项
	const [ searchOptions, setSearchOptions ] = useState( [] );		//	模糊匹配可选项
	const [ checkedList, setCheckedList ] = React.useState( [] );
	const [ indeterminate, setIndeterminate ] = React.useState( true );
	const [ checkAll, setCheckAll ] = React.useState( false );

	const getList = useCallback( () => {
		let temp = plainOptions.filter( v => v.label && v.label.indexOf( keyword ) > -1 );
		setSearchOptions( temp );
	}, [ plainOptions, keyword ] );

	const handleSearchInput = ( e ) => {
		e.persist();

		let value = e.target.value;

		if ( timer ) clearTimeout( timer );
		let newTimer = setTimeout( () => {
			setKeyword( value );
		}, 300 );
		setTimer( newTimer );
	};

	const handleInput = ( e ) => {
		e.persist();

		let value = e.target.value;
		setWildcard( value );
	};

	const onChange = list => {
		setCheckedList( list );
		setIndeterminate( !!list.length && list.length < searchOptions.length );
		setCheckAll( list.length === searchOptions.length );
	};

	const onCheckAllChange = e => {
		setCheckedList( e.target.checked ? searchOptions.map( v => v.value ) : [] );
		setIndeterminate( false );
		setCheckAll( e.target.checked );
	};

	const handleRadio = ( event ) => {
		setWildcardType( event.target.value );
	};

	const fetchData = useCallback( async () => {
		const params = {
			dataConfig: {
				dataModel: {
					tableName: tableCode,
					x: [ {
						aggregateType: '',
						dataType: field.dataType,
						formatType: '',
						id: field.dataIndex,
						quota: field.modelType === WD_TYPE ? 'WD' : 'DL',
						type: field.type
					}
					]
				},
				tableType: 'base'
			},
			type: 'filter'
		};
		const info = await getComponentData( params );
		if ( info.data.success ) {
			info.data.data.rows.forEach( v => {
				v.label = v.value;
			} );
			setPlainOptions( info.data.data.rows );
		}
	}, [ field.dataIndex, field.dataType, field.modelType, field.type, tableCode ] );

	useEffect( () => {
		fetchData();
	}, [ fetchData ] );

	useEffect( () => {
		console.log( field );
		if ( !field.filterConditions ) {
			return;
		}
		const checkList = field.filterConditions.find( t => t.symbol === 'IN' );
		const wildcard = field.filterConditions.find( t => t.symbol !== 'IN' );
		if ( checkList.value.length ) {
			setCheckedList( checkList.value );
		}
		if ( wildcard ) {
			setWildcard( wildcard.value );
			setWildcardType( wildcard.symbol );
		}
	}, [ field ] );

	useEffect( () => {
		getList();
	}, [ timer, getList ] );


	//	列表选择
	const setList = useCallback( () => {
		if ( checkedList.length === 0 ) return;
		const conditions = {
			formatType: '',
			id: [ field.dataIndex ],
			quota: 'WD',
			symbol: 'IN',
			value: checkedList
		};

		setDimensionStringList( [ conditions ] );
	}, [ field, checkedList, setDimensionStringList ] );

	//	通配符选择
	const setWildcardList = useCallback( () => {

		if ( !wildcard ) return;
		const conditions = {
			formatType: '',
			id: [ field.dataIndex ],
			quota: 'WD',
			symbol: wildcardType,
			value: [ wildcard ]
		};

		setDimensionStringWildcard( [ conditions ] );
	}, [ field, wildcardType, wildcard, setDimensionStringWildcard ] );

	useEffect( () => {
		setList();
	}, [ setList ] );

	useEffect( () => {
		setWildcardList();
	}, [ setWildcardList ] );
	return (
		<Tabs defaultActiveKey="1" type='card'>
			<TabPane tab="列表1" key="1">
				<Row justify="space-between">
					<Col span={ 12 }>
						<Input
							placeholder="请输入内容"
							allowClear
							onChange={ handleSearchInput }
							prefix={ <SearchOutlined/> }
						/>
					</Col>
				</Row>
				<Checkbox
					indeterminate={ indeterminate } onChange={ onCheckAllChange } checked={ checkAll }
					style={ { marginTop: '20px' } }>
					全选
				</Checkbox>
				<Divider style={ { margin: '15px 0' } }/>
				<CheckboxGroup options={ searchOptions } value={ checkedList } onChange={ onChange }
											 className='filter_field_modal_checkbox'/>
			</TabPane>

			<TabPane tab="通配符" key="2">
				<Row justify="space-between">
					<Col span={ 12 }>
						<Input
							placeholder="请输入内容"
							allowClear
							value={ wildcard }
							onChange={ handleInput }
						/>
					</Col>
				</Row>
				<Radio.Group
					name="radiogroup" defaultValue={ WILDCARD[ 0 ].value } value={ wildcardType }
					className='filter_field_modal_radio'
					onChange={ handleRadio }>
					{
						WILDCARD.map( ( item, index ) => {
							return (
								<Radio value={ item.value } key={ index }>{ item.label }</Radio>
							);
						} )
					}

				</Radio.Group>
			</TabPane>
		</Tabs>
	);
};

export default React.memo( FilterFieldString );
